<template>
  <div class="login-container flx-center">
    <div class="login-box">
      <SwitchDark class="dark" />
      <div class="login-left">
        <img class="login-left-img" src="@/assets/images/login_left.png" alt="login" />
      </div>
      <div class="login-form">
        <div class="login-logo">
          <!-- <img class="login-icon" src="@/assets/images/logo.svg" alt="" /> -->
          <h2 class="logo-text">欢迎登录</h2>
        </div>
        <LoginForm />
        <div class="register">
          <el-link type="primary" @click="register">没有账号？马上注册！</el-link>
        </div>
      </div>
    </div>
  </div>

  <Register v-model="showRegister" :captcha="captcha" @refresh="refresh" />
</template>

<script setup lang="ts" name="login">
import LoginForm from './components/LoginForm.vue'
import Register from './components/Register.vue'
import SwitchDark from '@/components/SwitchDark/index.vue'
import { ref } from 'vue'
import { registerCaptchaApi } from '@/api/modules/user'

const captcha = ref('')
const showRegister = ref(false)
const register = async () => {
  await getRegisterCaptcha()
  showRegister.value = true
}
const getRegisterCaptcha = async () => {
  let res = (await registerCaptchaApi()) as any
  if (res.errCode === 0) {
    captcha.value = res.captchaBase64
  }
}
const refresh = () => {
  getRegisterCaptcha()
}
</script>

<style scoped lang="scss">
@import './index.scss';

.register {
  margin-top: 20px;
  display: flex;
  justify-content: right;
}
</style>
